<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>全部设备</title>
	<meta name="viewport"  content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="${path}/resource/plugins/bootstrap/css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="${path}/resource/css/ysrmain.css">
	<link rel="stylesheet" type="text/css" href="${path}/resource/css/gzfx.css">
	<link rel="stylesheet" href="${path}/resource/css/allEquipment.css">
	<script src="${path}/resource/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script type="text/javascript" src="${path}/resource/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${path}/resource/js/echarts.min.js"></script>	
	<script type="text/javascript"></script>
</head>
<body>
	
	<!-- 头部 -->
	<!-- 开始 -->
	<jsp:include page="top_nav.jsp"></jsp:include>
	<!-- 头部结束 -->
    <!-- 右侧内容区域 -->
    <div class="right-content  container-fluid">
    	<div class="row">
    		<!-- 主要图表区域 -->
    		<div class=" row right-nav">
	    			<div class="title-name">
	    				<span>变频器统计</span>
	    				
	    			</div>
	    			<div class=" right nav-over padding-r-1  ">
	    				         <button class=" search-btn float-r" type="button" onclick="attrYemaSearch();"></button>
					      <input id="require" type="text" placeholder="序列号、型号、或城市" class="back-m1 search-input float-r search back-m1 color-w">					      										      			
	    			</div>	    			
	    	</div>	
		  <!-- Table -->
		  <div class="table-div content-img">
			  <table id="listtable" class="table table-striped" style="font-size: 13px">
			  	  <tr>
					  <th>变频器序列号</th>
					  <th>设备型号</th>
					  <th>所在城市</th>
					  <th>故障类型</th>
					  <th>故障发生时间</th>
				  </tr>
				  <tr>
					  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/nowEquip?serialNum=0181413c">0181413c</a></td>
					  <td>风机接触器无法关闭</td>
					  <td>珠海市</td>
					  <td>风机接触器无法关闭</td>
					  <td>2016.07.08 17:00:00</td>
				  </tr>
				  <tr>
					  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/nowEquip?serialNum=0181413c">0181413c</a></td>
					  <td>风机接触器无法关闭</td>
					  <td>珠海市</td>
					  <td>风机接触器无法关闭</td>
					  <td>2016.07.08 17:00:00</td>
				  </tr>
				  <tr>
					  <td><a class="color-w" href="<%=path%>/manage/redirect/allEquip/nowEquip?serialNum=0181413c">0181413c</a></td>
					  <td>风机接触器无法关闭</td>
					  <td>珠海市</td>
					  <td>风机接触器无法关闭</td>
					  <td>2016.07.08 17:00:00</td>
				  </tr>
			  </table>
		  </div>
		  <!-- 分页 -->
		  <div id="fenye" class="pagers">
		  	<nav class="float-r padding-3">
		  	  <ul class="pagination">
		  	    <li id="goPrev"><a href="javascript:void(0);">&laquo;</a></li>
			    <li id="firstyema" class="active yema"><a href="javascript:void(0);">1</a></li>
<!-- 			    <li class="yema"><a href="javascript:void(0);">2</a></li> -->
<!-- 			    <li class="yema"><a href="javascript:void(0);">3</a></li> -->
<!-- 			    <li class="yema"><a href="javascript:void(0);">4</a></li> -->
<!-- 			    <li class="yema"><a href="javascript:void(0);">5</a></li> -->
			    <li id="goNext"><a href="javascript:void(0);">&raquo;</a></li>
		  	  </ul>
		  	</nav>
		  </div>
		</div>
    </div>

	


	
</body>
<script type="text/javascript" src="${path}/resource/js/webSocketConf.js"></script>	
<script type="text/javascript">
$(function(){
	$(".img-qbsb").parent().css({"color":"#82d1e8","text-shadow":" 0px 0px 10px #b7d6df"});
	$(".img-qbsb").parent().parent().addClass("dl-active");
	$(".img-qbsb").attr("src","${path}/resource/images/qbsb2.png"); 
	//test环境
	//attrYemaSearch();
})

var size = 1;
var curPageNO = 1;
function search() {
	$.ajax({
		type : 'POST',
		url : '<%=path%>/manage/firstdevTotal',
		data : {
			livedata : livedata,
			require : $("#require").val(),
			pageSize : 13,
			curPageNO : curPageNO
		},
		dataType : 'json',
		async : false,
		success : function(result) {
			if(result.status == "OK") {
				$('#listtable').text('');
				var html = "<tr><th>变频器序列号</th><th>安装位置</th><th>投运时间</th><th>工作状态</th></tr>";
				if(result.data.list == "[null]") {
					
				} else {
					console.log(result.data.list);
					size = result.data.size;
					var list = eval("(" + result.data.list + ")");
					$.each(list, function(i){
						var href = "<%=path%>/manage/redirect/allEquip/nowEquip?serialNum="+list[i].serialNum;
						html += '<tr><td><a class="color-w" href='+href+'>'+list[i].serialNum +
								'</a></td><td>'+list[i].cityArea +
								'</td><td>'+list[i].operationDate +
								'</td><td>'+list[i].state +'</td></tr>';
					});
				}
				$('#listtable').append(html);
			}
		},
		error : function() {
			//alert("系统错误！");
		}
	})
}
//点击页码
function attrYemaSearch() {
	curPageNO = 1;
	search();
	//$('.pagination').html('');
	$('.pagination').html('<li id="goPrev"><a href="javascript:void(0);">&laquo;</a></li>'+
	    '<li id="firstyema" class="active yema"><a href="javascript:void(0);">1</a></li>'+
	    '<li id="goNext"><a href="javascript:void(0);">&raquo;</a></li>');
	if(size > 13) {
		var html = '';
		var yemaToal = (size/13)+1;
		for(var i=2; i<yemaToal; i++) {
			html += '<li class="yema"><a href="javascript:void(0);">'+i+'</a></li>'
		}
		$('#firstyema').after(html);
	}
	attrYeMa();
}
function attrYeMa() {
	$('.yema').click(function() {
		console.log("a");
		$('.yema').removeClass("active");
		$(this).addClass("active");
		curPageNO = $(this).children('a').text();
		search();
	});
	$('#goPrev').click(function() {
		var prevyema = $(this).nextAll('.active').prev('.yema');
		if(prevyema != null && prevyema.length > 0) {
			$(this).nextAll('.active').removeClass("active");
			prevyema.addClass("active");
			curPageNO = prevyema.children('a').text();
			search();
		}
	});
	$('#goNext').click(function() {
		var nextyema = $(this).prevAll('.active').next('.yema');
		if(nextyema != null && nextyema.length > 0) {
			$(this).prevAll('.active').removeClass("active");
			nextyema.addClass("active");
			curPageNO = nextyema.children('a').text();
			search();
		}
	});
}



	//获取设备列表实时数据
	
	var webSocket = null;
    var livedata;
    if ("WebSocket" in window) {
		webSocket = new WebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else if ("MozWebSocket" in window) {
		webSocket = new MozWebSocket(webSocketUrl);
		console.log("建立实时连接！");
	} else {
		alert("浏览器不支持！");
	}
	webSocket.onerror = function() {
		alert("无法建立实时连接！");
	};
	webSocket.onopen = function(event) {
		send();
		console.log("open");
	};
	webSocket.onmessage = function() {
		if(event.data.length>2){
			livedata=event.data;
			//tableinitinfo();
			console.log(event.data);
			attrYemaSearch();
			webSocket.close();
		}else{
			console.log("resend...");
			send();
		}		
	};
	webSocket.onclose = function() {
	};
	window.onbeforeunload = function() {
		webSocket.close();
	};
	function send(){    //Websocket接口
	    console.log("send");
// 	    var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"breakerstate\",\"runninglight\",\"faultlight\"]}]";//调用参数
		var message = "[{\"serialnum\":\"all\",\"signalnames\":[\"c196\",\"c78\",\"c77\"]}]";//调用参数
	    webSocket.send(message);
	}

</script>
</html>